<section class="push-bottom-xl">
  <h1 class="push-bottom-sm mat-h1">Angular Material</h1>

  <p class="tc-td-secondary push-bottom-md">Material Design components</p>
</section>

<section>
  <h3>Core Components</h3>
  <p>
    The UI Platform is built on top of &#64;angular/material components which
    are the core of Covalent.
  </p>
  <h3>New &amp; Custom Components</h3>
  <p>
    With the UI Platform and your app usage, we suggest to follow the official
    material spec as closely as possible for these reasons:
  </p>
  <ul>
    <li>So our products remain consistent</li>
    <li>To be able to use public material design resources</li>
    <li>To onboard new hires more easily</li>
    <li>So devs can easily work on multiple products</li>
    <li>To enable easy updates and pull down the latest</li>
  </ul>
  <p>
    Obviously we'll need to extend and customize material, but when doing so try
    to submit to the main UI Platform repo and collaborate with others to ensure
    standards.
  </p>
  <a
    mat-button
    color="accent"
    target="_blank"
    href="https://v20.material.angular.io/components/categories"
  >
    Components
  </a>
  <a mat-button target="_blank" href="https://github.com/angular/components"
    >Github repo</a
  >
</section>

<mat-card class="push-bottom-xxl">
  <mat-card-header><mat-card-title>Resources</mat-card-title></mat-card-header>
  <mat-nav-list>
    <a
      mat-list-item
      href="https://medium.com/@kyleledbetter/why-we-re-doubling-down-on-material-design-for-our-enterprise-web-apps-ce7d36d498db"
      target="_blank"
    >
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Why Angular Material?</span>
    </a>
    <mat-divider></mat-divider>
    <a mat-list-item href="https://v20.material.angular.io/" target="_blank">
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Angular Material Docs Site</span>
    </a>
  </mat-nav-list>
</mat-card>
